<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <div style="text-align: left;">
        <el-button
          type="text"
          icon="el-icon-back"
          @click="goBack"
          style="padding-bottom: 0px;"
          >返回</el-button
        >
      </div>
    </el-col>
    <el-col :span="24">
      <div>
        <div>
          <h3 style="margin-top: 0px;margin-bottom: 0px">
            {{ article.title }}
          </h3>
        </div>
        <div
          style="width: 100%;margin-top: 5px;display: flex;justify-content: flex-end;align-items: center"
        >
          <div
            style="display: inline; color: #20a0ff;margin-left: 50px;margin-right:20px;font-size: 12px;"
          >
            {{ article.user.nickName }}
          </div>
          <span style="color: #20a0ff;margin-right:20px;font-size: 12px;"
            >浏览 {{ article.pageView == null ? 0 : article.pageView }}</span
          >
          <span style="color: #20a0ff;margin-right:20px;font-size: 12px;">
            {{ article.createTime }}</span
          >
          <el-tag
            type="success"
            v-for="(item, index) in article.tags"
            :key="index"
            size="small"
            style="margin-left: 8px"
            >{{ item.tagName }}
          </el-tag>
          <span style="margin:0px 50px 0px 0px"></span>
        </div>
      </div>
    </el-col>
    <el-col>
      <div style="text-align: left" v-html="article.htmlContent"></div>
    </el-col>
  </el-row>
</template>
<script>
import { get } from "../utils/api";
export default {
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  },
  mounted: function() {
    var id = this.$route.query.aid;
    this.loading = true;
    get("/article/" + id).then(resp => {
      if (resp.code == 0) {
        this.article = resp.data;
      }
      this.loading = false;
    });
  },
  data() {
    return {
      article: {},
      loading: false
    };
  }
};
</script>
